
/* 点击登录弹出登录框 */
    var submitObj = document.querySelector('.nav .right .sign')
    submitObj.onclick = function(){
        document.querySelector('.submit').style.display = 'block'
    }
/* 点击×隐藏登录框 */
    var cancelObj = document.querySelector('.submit .right .top span')
    cancelObj.onclick = function(){
        document.querySelector('.submit').style.display = 'none'
    }
/* 登录框的拖拽效果 */
var dialogObj = document.querySelector('.submit .left ')
dialogObj.onmousedown = function(evt){
    var oldE = evt ||window.event
    // console.log(dialogObj);
    document.onmousemove = function(evt){
        var e = evt ||window.event
        var left = e.clientX - oldE.offsetX
        var top = e.clientY - oldE.offsetY
        if(left<0) left = 0
        if(top<0) top = 0
        var sign = document.querySelector('.submit')
        var maxH = (window.innerHeight || document.documentElement.clientHeight) - sign.offsetHeight
        var maxW = (window.innerWidth  || document.documentElement.clientWidth) - sign.offsetWidth
        if(left>maxW) left = maxW
        if(top>maxH) top = maxH
        // console.log(left);
     
        sign.style.position = 'absolute'
        sign.style.left = left + 'px'
        sign.style.top = top + 'px'
    }
}
document.onmouseup = function(){
    document.onmousemove =null
}

/* 登录框倒计时设置 */
/* 
//思路：
1.点击获取验证码，弹出行为验证码（判断定时器标识是否存在，存在则return，不能弹出行为验证码），给行为验证码的×加取消事件
2.给行为验证码中的小球增加按下事件，同时给document增加鼠标移动事件
3.判断小球移动的左右位置，并限制小球的位置，同步到拼接的图片上
4.给document增加鼠标松开事件，松开之后取消鼠标移动事件，并判断当前图片的位置，在指定范围则进入倒计时
5.图片范围为指定之后，定时器开启
5-1定时器原理：
定时器中更改验证码的值定义num变量，判断num的大小，符合时清除定时器，清空标识，并赋值num，赋值验证码框的内容
  */

var captchaBtn = document.querySelector('.submit .right .bottom p:nth-of-type(3) span:nth-of-type(2)')
var num = 5
var t = null
captchaBtn.onclick = function(){
// 倒计时过程中不可打开行为验证码
        if(t) return
    /*行为验证码  */
    document.querySelector('.move').style.display = 'block'
    // 行为码的叉叉
    var moveObj = document.querySelector('.move p:nth-of-type(1) span:nth-child(2)')
    moveObj.onclick = function(){
        document.querySelector('.move').style.display = 'none'
    }
        //行为验证码通过则开始倒计时
    var dragObj = document.querySelector('.move p:nth-of-type(3) span')
    
        dragObj.onmousedown = function(evt){
        document.onmousemove = function(evt){
    var e = evt || window.event
    //获取小球初始位置距离左边框的距离
    var bodyObj = document.querySelector('body').offsetWidth/2
    var distance = bodyObj -200
    //    console.log(bodyObj);
    //小球的移动位置限制
    left = e.clientX - dragObj.offsetWidth/2 -distance
    if(left<0) left = 0
    if(left>370) left = 370
    //    同步图片的位置
    var JigsawObj = document.querySelector('.move p:nth-of-type(2) img:nth-child(2)')
    JigsawObj.style.left = left + 'px'
    dragObj.style.left = left + 'px'

        }
        //  在鼠标松开时移除鼠标移动事件，判断行为验证码是否正确
        document.onmouseup = function(){
            
            document.onmousemove = null
            //判断松开的位置是否正确  270~280
            var range = parseInt(dragObj.style.left)
            // console.log(range);
            if(range>270 && range<280){
            // 防止定时器叠加
            // if(t) return
        t = setInterval(function(){
            captchaBtn.innerText =  num + 's后重新发送'
            num--
            // 判断num的大小，清空t，清除定时器，赋值内容，重新赋值num
            if(num==-1){
                clearInterval(t)
                num = 5
                captchaBtn.innerText =  '重新发送'
                t = null
            } 
        },1000)
        document.querySelector('.move').style.display = 'none'
        document.querySelector('.move p:nth-of-type(2) img:nth-child(2)').style.left = '0px'
    dragObj.style.left = '0px'
        console.log(moveObj);
    }  
    document.querySelector('.move p:nth-of-type(2) img:nth-child(2)').style.left = '0px'
    dragObj.style.left = '0px'

            }
        }
 }

/* 登录表单验证 */
var btnObj = document.querySelector('.submit .right .bottom p:nth-of-type(5) button')
btnObj.onclick = function(evt){
    var e = evt || window.event
    e.preventDefault()
    var num = 0
    // 手机号输入框样式
    var mobileObj = document.querySelector('.submit .right .bottom p:nth-of-type(1) input')
if( mobileObj.value.length == 11 && Number(mobileObj.value)){
    document.querySelector('.submit .right .bottom p:nth-of-type(2)').innerText = ''
    num+=1
} else{
    document.querySelector('.submit .right .bottom p:nth-of-type(2)').innerText = '请输入正确的手机号'
}
    // 短信验证框样式
    var msgObj = document.querySelector('.submit .right .bottom p:nth-of-type(3) input')
    if( msgObj.value.length == 4 && Number(msgObj.value)){
        document.querySelector('.submit .right .bottom p:nth-of-type(4)').innerText = ''
        num+=1
    } else{
        document.querySelector('.submit .right .bottom p:nth-of-type(4)').innerText = '请输入正确的验证码'
    }
    // 表单提交验证
    if(num===2){
        alert('登录成功')
    }
}

 /* 热门歌单的滚动效果 */
// 思路：外面添加盒子，让盒子margin-left在定时器中增加
setInterval(function(){
    var gunObj = document.querySelector('.hot .contain .bottom ul')
    var sizeObj = parseInt(gunObj.style.marginLeft)
    sizeObj--
    if( sizeObj<=-2600){
        gunObj.style.marginLeft = 0 + 'px'
    } else{
        gunObj.style.marginLeft = sizeObj + 'px'
    }
},10)




